<template>
    <div class="stage" v-if="pageData">
        <div class="ranking-title availability">
            <p>设备可用率</p>
            <p>TOP3</p>
            <p>设备</p>
        </div>
        <div class="ranking-title repair">
            <p>及时修复率</p>
            <p>TOP3</p>
            <p>科室</p>
        </div>
        <div class="overview">
            <h2>2017 年为 <span>{{pageData.fixNumber}}</span> 位医工累计节约<br/>维修时长： <span>{{pageData.saveTime}}</span> 小时</h2>
            <h4>设备正常运转</h4>
            <h4>为保证患者生命质量提供及时支持</h4>
        </div>
        <div class="ranking-distance ranking-distance－1">
            <div class="location">
                <div class="name">
                    <span>top.<b>3</b></span>
                    <h3>{{pageData.use.use3}}</h3>
                </div>
                <div class="column"></div>
            </div>
            <div class="location">
                <div class="name">
                    <span>top.<b>1</b></span>
                    <h3>{{pageData.use.use1}}</h3>
                </div>
                <div class="column"></div>
            </div>
            <div class="location">
                <div class="name">
                    <span>top.<b>2</b></span>
                    <h3>{{pageData.use.use2}}</h3>
                </div>
                <div class="column"></div>
            </div>
        </div>
        <div class="ranking-distance ranking-distance－2">
            <div class="location">
                <div class="name">
                    <span>top.<b>3</b></span>
                    <h3>{{pageData.intime.intime3}}</h3>
                </div>
                <div class="column"></div>
            </div>
            <div class="location">
                <div class="name">
                    <span>top.<b>1</b></span>
                    <h3>{{pageData.intime.intime1}}</h3>
                </div>
                <div class="column"></div>
            </div>
            <div class="location">
                <div class="name">
                    <span>top.<b>2</b></span>
                    <h3>{{pageData.intime.intime2}}</h3>
                </div>
                <div class="column"></div>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default {
        props: {
            pageData: {
                type: [Array, Object]
            }
        },
        data () {
            return {}
        },
        mounted () {
        },
        components: {},
        watch: {
            pageData: function (n, o) {
            }
        }
    }
</script>
<style lang='scss' rel="stylesheet/scss">
    .stageColumn{
        position: absolute;
        width: 80%;
        left: 10%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .stage{
        background-image: url("../../assets/images/stage-bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        overflow: hidden;
        .ranking-title{
            width: 100%;
            height: 5%;
            color: #0371f6;
            position: absolute;
            &:after{
                content:".";
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
            }
            &.availability{
                top: 8.5%;
            }
            &.repair{
                top: 44.8%;
            }
            >p{
                &:nth-child(1){
                    float: left;
                    width: 44%;
                    font-size: 2.2rem;
                    padding-left: 10%;
                }
                &:nth-child(2){
                    float: left;
                    font-family: 'DIGIT';
                    width: 30%;
                    font-size: 2.6rem;
                    text-align: right;
                    color: #2eeec9;
                }
                &:nth-child(3){
                    float: right;
                    font-size: 1.8rem;
                    width: 11%;
                    text-align: left;
                }
            }
        }
        .overview{
            position: absolute;
            bottom: 0;
            width: 63%;
            height: 19%;
            left: 12%;
            >h2{
                color: #569cf4;
                font-size: 2.5rem;
                font-weight: normal;
                margin-bottom: 1rem;
                >span{
                    color: #2eeec9;
                    font-family: DIGIT;
                }
            }
            >h4{
                color: #29c2b0;
                font-size: 1.8rem;
                &:nth-child(2){
                    margin-top: 0.6rem;
                }
            }
        }
        .ranking-distance{
            //position: absolute;
            width: 70%;
            &.ranking-distance－1{
                margin: 20% auto 0 15%;
                height: 26%;
            }
            &.ranking-distance－2{
                margin: 16% auto 0 15%;
                height: 26%;
            }
            &:after{
                content:".";
                display:block;
                height:0;
                clear:both;
                visibility:hidden;
            }
            .location{
                position: relative;
                float: left;
                height: 100%;
                width: 33%;
                overflow: hidden;
                .name{
                    color: #2eeec9;
                    left: 2rem;
                    position: absolute;
                    width: 77%;
                    >span{
                        font-size: 1.6rem;
                        font-family: 'DIGIT';
                        letter-spacing: 2px;
                        display: inherit;
                        margin-top: 20%;
                        >b{
                            font-size: 3.2rem;
                        }
                    }
                    >h3{
                        font-size: 2rem;
                        letter-spacing: 2px;
                        font-weight: normal;
                    }
                }
                .column{
                    @extend .stageColumn;
                }
                &:nth-child(1){
                    .name{
                        bottom: 32%;
                        opacity: 0;
                    }
                    .column{
                        height: 28%;
                        background-image: url("../../assets/images/stage-1.png");
                        bottom: -28%;
                    }
                }
                &:nth-child(2){
                    .name{
                        bottom: 56%;
                        opacity: 0;
                    }
                    .column{
                        height: 52%;
                        background-image: url("../../assets/images/stage-2.png");
                        bottom: -52%;
                    }
                }
                &:nth-child(3){
                    .name{
                        bottom: 40%;
                        opacity: 0;
                    }
                    .column{
                        height: 38%;
                        background-image: url("../../assets/images/stage-3.png");
                        bottom: -38%;
                    }
                }
            }
        }
    }
    .showCurrentPageModule{
        .location{
            &:nth-child(1){
                .name{
                    animation: defaultOpacityAni 0.1s linear 0.3s;
                    animation-fill-mode: forwards;
                }
                .column{
                    animation: defaultBottomZero 0.2s linear;
                    animation-fill-mode: forwards;
                }
            }
            &:nth-child(2){
                .name{
                    animation: defaultOpacityAni 0.1s linear 0.5s;
                    animation-fill-mode: forwards;
                }
                .column{
                    animation: defaultBottomZero 0.4s linear;
                    animation-fill-mode: forwards;
                }
            }
            &:nth-child(3){
                .name{
                    animation: defaultOpacityAni 0.1s linear 0.3s;
                    animation-fill-mode: forwards;
                }
                .column{
                    animation: defaultBottomZero 0.3s linear;
                    animation-fill-mode: forwards;
                }
            }
        }
    }
</style>